<!--header-->
<template>
  <div>
    <mt-header fixed style="background:#242D36;color:#fff;">
      <div slot="left">
        <router-link to="index" slot="left" style="text-decoration: none;color: #fff;">
          <mt-button icon="back" style="display: flex;justify-content: flex-start;align-items: center;font-size:14px;letter-spacing:2px;">
            <p style="margin-left:.2rem;">{{ (select.name && select.name) || '- -' }}</p>
            <p style="margin-left:.2rem;color:#e96302;">{{ (select.code && select.code) || '- -' }}</p>
          </mt-button>
        </router-link>
      </div>
      <div slot="right">
        <!-- <img src="../assets/time.png" alt="" style="width:.6rem;height:.6rem;margin: 0 .2rem;" v-if="istime" @click="time()" /> -->
        <img @click="right()" src="../assets/right.png" alt="" style="width:.6rem;height:.6rem;" />
      </div>
    </mt-header>

    <!-- 右滑 -->
    <div v-if="isright" class="isright">
      <div style="width:30%;height: 100%;opacity: 0;" @click="rightfalse"></div>
      <div class="right_text" style="width:70%;height:100%;background: #242D36;opacity: .9;">
        <p>主菜单</p>
        <!-- 	<div>
					<img src="../assets/shezhi.png" alt="">
					<span>系统设置</span>
				</div> -->
        <div @click="realname()">
          <img src="../assets/denglu.png" alt="" />
          <span>实名认证</span>
        </div>
        <!-- <div @click="optional()" v-if="token">
          <img src="../assets/shezhi.png" alt="" />
          <span>管理自选合约</span>
        </div> -->
        <!-- v-if="token!=''" -->
        <!-- <div @click="profit()">
					<img src="../assets/tianjia.png" alt="">
					<span>止盈止损设置</span>
				</div> -->
        <div @click="mingxi()" v-if="token">
          <img src="../assets/zijinxq.png" alt="" />
          <span>资金详情</span>
        </div>
        <div @click="gonggaolist()">
          <img src="../assets/zixuan.png" alt="" />
          <span>通知公告</span>
        </div>
        <div @click="changepwd" v-if="token">
          <img src="../assets/xiugai.png" alt="" />
          <span>修改密码</span>
        </div>
        <div @click="money" v-if="token">
          <img src="../assets/tianjia.png" alt="" />
          <span>充值提现</span>
        </div>
        <div @click="login()" v-if="!token">
          <img src="../assets/denglu.png" alt="" />
          <span>登入交易账号</span>
        </div>
        <div @click="logout()" v-if="token">
          <img src="../assets/tuichu.png" alt="" />
          <span>退出交易账号</span>
        </div>
        <div @click="on()">
          <img src="../assets/guanyu.png" alt="" />
          <span>关于</span>
        </div>
      </div>
    </div>
    <!-- bottom -->
    <div v-if="timebottom" class="timebottom" style="">
      <div @click="bottomfalse" class="bottomfalse" style=""></div>
      <div class="bottom_true" style="">
        <div class="bottom_true_top" style="">
          <span @click="zhouqi(6000)">1m</span>
          <span @click="zhouqi(30000)">5m</span>
          <span @click="zhouqi(90000)">15m</span>
          <span @click="zhouqi(180000)">30m</span>
          <span @click="zhouqi(3600000)">1h</span>
        </div>
        <div class="bottom_true_top" style="">
          <span @click="zhouqi(14400000)">4h</span>
          <span @click="zhouqi(86400000)">1日</span>
          <span @click="zhouqi(604800000)">1周</span>
          <span @click="zhouqi('month')">1月</span>
          <span @click="zhouqi('year')">1年</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
    ticket: state => state.trade.ticket /* 推送数据 */,
    tablistli: state => state.tablistli /* 时间选择器 */
  }),
  data() {
    return {
      isright: false,
      products: {},
      istime: false,
      timebottom: false,
      token: true
    };
  },
  mounted() {
    if (!this.$svcInvoke.config._token) {
      this.token = false;
      return this.$router.push({ path: '/' });
    }
  },
  watch: {
    // tablistli(val) {
    // console.log(val);
    // if (val == 'K线') {
    //   this.istime = true;
    // } else {
    //   this.istime = false;
    // }
    // }
  },

  methods: {
    zhouqi(range) {
      this.$store.commit('set', { timelist: range });
      this.timebottom = false;
    },
    right() {
      if (this.$svcInvoke.config._token) {
        this.isright = !this.isright;
      } else {
        if (localStorage.getItem('_token')) {
          this.$svcInvoke.setConf('_token', localStorage.getItem('_token'));
          this.isright = !this.isright;
        } else {
          this.$layer.msg('登录查看更多！');
          return this.$router.push({ path: '/' });
        }
      }
    },
    rightfalse() {
      this.isright = false;
    },
    time() {
      this.timebottom = !this.timebottom;
    },
    bottomfalse() {
      this.timebottom = false;
    },
    // 实名
    realname() {
      this.$router.push({ path: 'realname' });
    },
    /* 通知公告*/
    gonggaolist() {
      this.$router.push({
        path: 'gonggao'
      });
    },
    money() {
      this.$router.push({
        path: 'chongzhi'
      });
    },
    changepwd() {
      this.$router.push({
        path: 'changepwd'
      });
    },
    mingxi() {
      this.$router.push({
        path: 'mingxi'
      });
    },
    optional() {
      this.$router.push({
        path: 'optional'
      });
    },
    on() {
      this.$router.push({
        path: 'on'
      });
    },
    profit() {
      this.$router.push({
        path: 'profit'
      });
    },
    login() {
      this.$svcInvoke.setConf('_token', '');
      localStorage.removeItem('_token');
      this.$router.push({ path: '/' });
    },
    logout() {
      this.$svcInvoke.setConf('_token', '');
      localStorage.removeItem('_token');
      //退出登录
      this.$router.push({ path: '/' });
    }
  }
};
</script>

<style scoped>
@import url('../../static/css/popup.css');

.timebottom {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

.bottomfalse {
  width: 100%;
  height: 90%;
  background: #000;
  opacity: 0.5;
}

.bottom_true {
  width: 100%;
  height: 10%;
  background: #fff;
}

.bottom_true_top {
  width: 100%;
  height: 50%;
  border-bottom: 1px solid #c3c3c3;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bottom_true_top span {
  border-right: 1px solid #c3c3c3;
  display: inline-block;
  width: 18%;
  height: 100%;
  line-height: 0.95rem;
  text-align: center;
  letter-spacing: 2px;
  font-size: 0.35rem;
}

.bottom_true_top span:active {
  color: #e96302;
}

.bottom_true_top span:last-child {
  border: none;
}
</style>
